<template>
    <div class="home">
        <Header head-title="药价查询" go-back="true"></Header>
        <section class="group Select">
            <input type="text" class="searchIn" placeholder="输入药品名称进行搜索" @focus="Foucs()">
            <p class="fonts activecolor SearchP" v-if="SearchP" @click="SearchSlide()">取消</p>
        </section>

        <!-- //  搜索历史 -->
        <section class="group fonts history" v-if="searchHistory">
            <section class="Select">
                <h3 class="HomeH">搜索历史</h3>
                <p>删除历史</p>
            </section>
            <section class="fontC6">
                <div class="searchHis">平顶山市第一人民医院</div>
                <div class="searchHis">妇科</div>
                <div class="searchHis">省医院</div>
                <div class="searchHis">县医院</div>
            </section>
        </section>

        <!-- //  未找到您搜索的内容 -->
        <section class="group">
            <img class="ImgNone" src="../../../assets/img/voucher.png" alt="">
            <p class="fonts">未找到您搜索的内容，请重新输入</p>
        </section>

        <section class="group">
            <section class="Select HosAll" @click="HosRegisted()">
                <section class="HosImg">
                    <img class="borderR" src="../../../assets/img/image1.jpg" alt="">
                </section>
                <div class="HosCon">
                    <section class="Select">
                        <h3 class="fonts">阿莫西林胶囊</h3>
                        <p class="fonts activecolor">￥1.49</p>
                    </section>
                    <section class="Select HosCenter">
                        <p class="activecolor fonts">平顶山市第一人民医院</p>
                    </section>
                    <p class="fontsMin">厂家：天津药业集团新郑股份有限公司</p>
                     <p class="fontsMin">规格：0.25g*12s</p>
                </div>
            </section>
             <section class="Select HosAll" @click="HosRegisted()">
                <section class="HosImg">
                    <img class="borderR" src="../../../assets/img/image1.jpg" alt="">
                </section>
                <div class="HosCon">
                    <section class="Select">
                        <h3 class="fonts">阿莫西林胶囊</h3>
                        <p class="fonts activecolor">￥1.49</p>
                    </section>
                    <section class="Select HosCenter">
                        <p class="activecolor fonts">平顶山市第一人民医院</p>
                    </section>
                    <p class="fontsMin">厂家：天津药业集团新郑股份有限公司</p>
                     <p class="fontsMin">规格：0.25g*12s</p>
                </div>
            </section>
             <section class="Select HosAll" @click="HosRegisted()">
                <section class="HosImg">
                    <img class="borderR" src="../../../assets/img/image1.jpg" alt="">
                </section>
                <div class="HosCon">
                    <section class="Select">
                        <h3 class="fonts">阿莫西林胶囊</h3>
                        <p class="fonts activecolor">￥1.49</p>
                    </section>
                    <section class="Select HosCenter">
                        <p class="activecolor fonts">平顶山市第一人民医院</p>
                    </section>
                    <p class="fontsMin">厂家：天津药业集团新郑股份有限公司</p>
                     <p class="fontsMin">规格：0.25g*12s</p>
                </div>
            </section>

        </section>
    </div>
</template>

<script>
import Header from '../../../components/Header'
export default {
  name: 'Home',
  data () {
    return {
      activeIndex: '1',
      input: '',
      SearchP: false, // 取消
      SearchCon: false, // 药品列表
      searchHistory: false, // 搜索历史
      SearchNone: false //  未找到搜索内容
    }
  },
  components: {
    Header
  },
  methods: {
    //    搜索框获取焦点事件
    Foucs () {
      this.SearchP = true
      this.searchHistory = true
    },
    //  点击取消
    SearchSlide () {
      this.SearchP = false
      this.searchHistory = false
    },
    //  点击医院
    HosRegisted () {
      this.$router.push({
        path: '/PriceDetail'
      })
    }
  }
}
</script>

<style scoped>
.home {
    padding-top: 1rem;
}
.group {
    padding: 0 0.2rem;
    /* margin-top: 0; */
}
.searchIn {
    flex: 4;
}
.SearchP {
    flex: 1;
}
.history {
    margin-top: 0.5rem;
}
</style>
